<template>
  <component
    :is="tag"
    :class="buttonClass"
    :disabled="disabled || loading"
    :type="htmlType"
    v-bind="linkProps"
    @click="handleClick"
  >
    <!-- 加载状态 -->
    <Icon
      v-if="loading"
      name="refresh"
      :size="iconSize"
      spin
      class="button-loading-icon"
    />

    <!-- 前置图标 -->
    <Icon
      v-else-if="prefixIcon"
      :name="prefixIcon"
      :size="iconSize"
      class="button-prefix-icon"
    />

    <!-- 按钮内容 -->
    <span v-if="$slots.default || text" class="button-content">
      <slot>{{ text }}</slot>
    </span>

    <!-- 后置图标 -->
    <Icon
      v-if="suffixIcon && !loading"
      :name="suffixIcon"
      :size="iconSize"
      class="button-suffix-icon"
    />

    <!-- 徽章 -->
    <span
      v-if="badge && !loading"
      class="button-badge"
      :class="`badge-${badgeType}`"
    >
      {{ badge }}
    </span>
  </component>
</template>

<script setup lang="ts">
import { computed } from "vue";
import { useRouter } from "vue-router";
import Icon from "./Icon.vue";

interface Props {
  // 基础属性
  type?:
    | "primary"
    | "secondary"
    | "success"
    | "warning"
    | "error"
    | "info"
    | "text"
    | "link";
  size?: "mini" | "small" | "medium" | "large";
  variant?: "filled" | "outlined" | "ghost" | "text";
  shape?: "default" | "round" | "circle";

  // 状态
  disabled?: boolean;
  loading?: boolean;
  active?: boolean;

  // 内容
  text?: string;
  prefixIcon?: string;
  suffixIcon?: string;

  // HTML 属性
  htmlType?: "button" | "submit" | "reset";

  // 链接属性
  to?: string | object;
  href?: string;
  target?: string;
  replace?: boolean;

  // 样式
  block?: boolean;
  round?: boolean;
  circle?: boolean;

  // 徽章
  badge?: string | number;
  badgeType?: "primary" | "success" | "warning" | "error" | "info";

  // 其他
  tag?: string;
  nativeType?: string;
}

const props = withDefaults(defineProps<Props>(), {
  type: "primary",
  size: "medium",
  variant: "filled",
  shape: "default",
  htmlType: "button",
  badgeType: "primary",
  tag: "button",
});

const emit = defineEmits<{
  click: [event: MouseEvent];
}>();

const router = useRouter();

// 计算标签类型
const tag = computed(() => {
  if (props.to) return "router-link";
  if (props.href) return "a";
  return props.tag;
});

// 计算链接属性
const linkProps = computed(() => {
  const attrs: Record<string, any> = {};

  if (props.to) {
    attrs.to = props.to;
    if (props.replace) attrs.replace = true;
  }

  if (props.href) {
    attrs.href = props.href;
    if (props.target) attrs.target = props.target;
  }

  return attrs;
});

// 计算按钮类名
const buttonClass = computed(() => {
  const classes = ["button"];

  // 基础类型
  classes.push(`button-${props.type}`);
  classes.push(`button-${props.size}`);
  classes.push(`button-${props.variant}`);
  classes.push(`button-${props.shape}`);

  // 状态类
  if (props.disabled) classes.push("button-disabled");
  if (props.loading) classes.push("button-loading");
  if (props.active) classes.push("button-active");

  // 样式类
  if (props.block) classes.push("button-block");
  if (props.round) classes.push("button-round");
  if (props.circle) classes.push("button-circle");

  // 图标相关
  if (props.prefixIcon && !props.text && !props.$slots.default) {
    classes.push("button-icon-only");
  }

  return classes.join(" ");
});

// 计算图标大小
const iconSize = computed(() => {
  const sizeMap = {
    mini: 12,
    small: 14,
    medium: 16,
    large: 18,
  };
  return sizeMap[props.size];
});

// 处理点击事件
const handleClick = (event: MouseEvent) => {
  if (props.disabled || props.loading) {
    event.preventDefault();
    event.stopPropagation();
    return;
  }

  emit("click", event);
};
</script>

<style scoped>
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid transparent;
  border-radius: 6px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
  white-space: nowrap;
  vertical-align: middle;
  position: relative;
  overflow: hidden;
}

.button:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.button:active {
  transform: translateY(1px);
}

/* 尺寸 */
.button-mini {
  height: 24px;
  padding: 0 8px;
  font-size: 11px;
  line-height: 1;
}

.button-small {
  height: 32px;
  padding: 0 12px;
  font-size: 12px;
  line-height: 1;
}

.button-medium {
  height: 40px;
  padding: 0 16px;
  font-size: 14px;
  line-height: 1;
}

.button-large {
  height: 48px;
  padding: 0 20px;
  font-size: 16px;
  line-height: 1;
}

/* 形状 */
.button-round {
  border-radius: 20px;
}

.button-circle {
  border-radius: 50%;
  width: var(--button-height);
  padding: 0;
}

.button-circle.button-mini {
  width: 24px;
}

.button-circle.button-small {
  width: 32px;
}

.button-circle.button-medium {
  width: 40px;
}

.button-circle.button-large {
  width: 48px;
}

/* 块级按钮 */
.button-block {
  width: 100%;
  display: flex;
}

/* 主要按钮 */
.button-primary.button-filled {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: white;
}

.button-primary.button-filled:hover:not(.button-disabled) {
  background-color: var(--primary-color-hover);
  border-color: var(--primary-color-hover);
}

.button-primary.button-outlined {
  background-color: transparent;
  border-color: var(--primary-color);
  color: var(--primary-color);
}

.button-primary.button-outlined:hover:not(.button-disabled) {
  background-color: var(--primary-color-alpha);
}

.button-primary.button-ghost {
  background-color: var(--primary-color-alpha);
  border-color: transparent;
  color: var(--primary-color);
}

.button-primary.button-ghost:hover:not(.button-disabled) {
  background-color: var(--primary-color-hover-alpha);
}

.button-primary.button-text {
  background-color: transparent;
  border-color: transparent;
  color: var(--primary-color);
}

.button-primary.button-text:hover:not(.button-disabled) {
  background-color: var(--primary-color-alpha);
}

/* 次要按钮 */
.button-secondary.button-filled {
  background-color: var(--secondary-color);
  border-color: var(--secondary-color);
  color: white;
}

.button-secondary.button-filled:hover:not(.button-disabled) {
  background-color: var(--secondary-color-hover);
  border-color: var(--secondary-color-hover);
}

.button-secondary.button-outlined {
  background-color: transparent;
  border-color: var(--border-color);
  color: var(--text-primary);
}

.button-secondary.button-outlined:hover:not(.button-disabled) {
  border-color: var(--primary-color);
  color: var(--primary-color);
}

.button-secondary.button-ghost {
  background-color: var(--bg-secondary);
  border-color: transparent;
  color: var(--text-primary);
}

.button-secondary.button-ghost:hover:not(.button-disabled) {
  background-color: var(--hover-bg);
}

.button-secondary.button-text {
  background-color: transparent;
  border-color: transparent;
  color: var(--text-secondary);
}

.button-secondary.button-text:hover:not(.button-disabled) {
  color: var(--text-primary);
  background-color: var(--hover-bg);
}

/* 成功按钮 */
.button-success.button-filled {
  background-color: var(--success-color);
  border-color: var(--success-color);
  color: white;
}

.button-success.button-filled:hover:not(.button-disabled) {
  background-color: var(--success-color-hover);
  border-color: var(--success-color-hover);
}

.button-success.button-outlined {
  background-color: transparent;
  border-color: var(--success-color);
  color: var(--success-color);
}

.button-success.button-outlined:hover:not(.button-disabled) {
  background-color: var(--success-color-alpha);
}

.button-success.button-ghost {
  background-color: var(--success-color-alpha);
  border-color: transparent;
  color: var(--success-color);
}

.button-success.button-ghost:hover:not(.button-disabled) {
  background-color: var(--success-color-hover-alpha);
}

.button-success.button-text {
  background-color: transparent;
  border-color: transparent;
  color: var(--success-color);
}

.button-success.button-text:hover:not(.button-disabled) {
  background-color: var(--success-color-alpha);
}

/* 警告按钮 */
.button-warning.button-filled {
  background-color: var(--warning-color);
  border-color: var(--warning-color);
  color: white;
}

.button-warning.button-filled:hover:not(.button-disabled) {
  background-color: var(--warning-color-hover);
  border-color: var(--warning-color-hover);
}

.button-warning.button-outlined {
  background-color: transparent;
  border-color: var(--warning-color);
  color: var(--warning-color);
}

.button-warning.button-outlined:hover:not(.button-disabled) {
  background-color: var(--warning-color-alpha);
}

.button-warning.button-ghost {
  background-color: var(--warning-color-alpha);
  border-color: transparent;
  color: var(--warning-color);
}

.button-warning.button-ghost:hover:not(.button-disabled) {
  background-color: var(--warning-color-hover-alpha);
}

.button-warning.button-text {
  background-color: transparent;
  border-color: transparent;
  color: var(--warning-color);
}

.button-warning.button-text:hover:not(.button-disabled) {
  background-color: var(--warning-color-alpha);
}

/* 错误按钮 */
.button-error.button-filled {
  background-color: var(--error-color);
  border-color: var(--error-color);
  color: white;
}

.button-error.button-filled:hover:not(.button-disabled) {
  background-color: var(--error-color-hover);
  border-color: var(--error-color-hover);
}

.button-error.button-outlined {
  background-color: transparent;
  border-color: var(--error-color);
  color: var(--error-color);
}

.button-error.button-outlined:hover:not(.button-disabled) {
  background-color: var(--error-color-alpha);
}

.button-error.button-ghost {
  background-color: var(--error-color-alpha);
  border-color: transparent;
  color: var(--error-color);
}

.button-error.button-ghost:hover:not(.button-disabled) {
  background-color: var(--error-color-hover-alpha);
}

.button-error.button-text {
  background-color: transparent;
  border-color: transparent;
  color: var(--error-color);
}

.button-error.button-text:hover:not(.button-disabled) {
  background-color: var(--error-color-alpha);
}

/* 信息按钮 */
.button-info.button-filled {
  background-color: var(--info-color);
  border-color: var(--info-color);
  color: white;
}

.button-info.button-filled:hover:not(.button-disabled) {
  background-color: var(--info-color-hover);
  border-color: var(--info-color-hover);
}

.button-info.button-outlined {
  background-color: transparent;
  border-color: var(--info-color);
  color: var(--info-color);
}

.button-info.button-outlined:hover:not(.button-disabled) {
  background-color: var(--info-color-alpha);
}

.button-info.button-ghost {
  background-color: var(--info-color-alpha);
  border-color: transparent;
  color: var(--info-color);
}

.button-info.button-ghost:hover:not(.button-disabled) {
  background-color: var(--info-color-hover-alpha);
}

.button-info.button-text {
  background-color: transparent;
  border-color: transparent;
  color: var(--info-color);
}

.button-info.button-text:hover:not(.button-disabled) {
  background-color: var(--info-color-alpha);
}

/* 链接按钮 */
.button-link {
  background-color: transparent;
  border-color: transparent;
  color: var(--primary-color);
  text-decoration: underline;
  padding: 0;
  height: auto;
  min-height: auto;
}

.button-link:hover:not(.button-disabled) {
  color: var(--primary-color-hover);
}

/* 状态 */
.button-disabled {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

.button-loading {
  cursor: not-allowed;
  pointer-events: none;
}

.button-active {
  transform: translateY(1px);
}

/* 图标 */
.button-loading-icon,
.button-prefix-icon,
.button-suffix-icon {
  flex-shrink: 0;
}

.button-icon-only {
  gap: 0;
}

.button-icon-only .button-content {
  display: none;
}

/* 徽章 */
.button-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 600;
  line-height: 16px;
  text-align: center;
  color: white;
  z-index: 1;
}

.badge-primary {
  background-color: var(--primary-color);
}

.badge-success {
  background-color: var(--success-color);
}

.badge-warning {
  background-color: var(--warning-color);
}

.badge-error {
  background-color: var(--error-color);
}

.badge-info {
  background-color: var(--info-color);
}

/* 响应式 */
@media (max-width: 768px) {
  .button-large {
    height: 44px;
    font-size: 15px;
  }

  .button-medium {
    height: 36px;
    font-size: 13px;
  }
}

/* 暗色主题适配 */
@media (prefers-color-scheme: dark) {
  .button-secondary.button-filled {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-primary);
  }

  .button-secondary.button-filled:hover:not(.button-disabled) {
    background-color: var(--hover-bg);
    border-color: var(--border-color-hover);
  }
}

/* 动画效果 */
.button::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%);
  transition:
    width 0.3s ease,
    height 0.3s ease;
}

.button:active::before {
  width: 200px;
  height: 200px;
}

/* 加载动画 */
.button-loading .button-loading-icon {
  animation: button-loading 1s linear infinite;
}

@keyframes button-loading {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>
